<template>
    <div>
        <page-main>
            <div>
                <div style="display: flex; justify-content: space-between; margin-top: 15px; padding-left: 10px;">
                    <div>
                        <el-input v-model="realName" class="search" size="small" style="border-radius: 15px; overflow: hidden;" placeholder="请输入用户名进行搜索..." @keydown.enter.native="initDataListUser">
                            <el-button slot="append" icon="el-icon-search" @click="initDataListUser" />
                        </el-input>
                    </div>
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="showAddUserView">添加用户</el-button>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <el-table v-loading="loading" :data="dataListUser" stripe border style="width: 100%;" height="570px" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column fixed prop="realName" label="姓名" width="80" />
                    <el-table-column prop="id" label="ID" width="50" />
                    <el-table-column prop="userId" label="用户ID" width="80" />
                    <el-table-column prop="userSex" label="性别" width="50" />
                    <el-table-column prop="unitName" label="所属单位" width="140" />
                    <el-table-column prop="unitType" label="单位类型" width="90" />
                    <el-table-column prop="address" label="地址" width="200" />
                    <el-table-column prop="occupation" label="职位" width="80" />
                    <el-table-column prop="major" label="专业" width="100" />
                    <el-table-column prop="area" label="领域" width="100" />
                    <el-table-column fixed="right" label="操作" width="190">
                        <template slot-scope="scope">
                            <el-button style="padding: 3px;" type="text" size="small" @click="showEditUserView(scope.row)">编辑</el-button>
                            <el-button style="padding: 3px;" type="primary" size="mini" @click="showGetUserView(scope.row)">查看账户资料</el-button>
                            <el-button style="padding: 3px;" type="danger" size="mini" @click="deleteUser(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                    <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
                </div>
            </div>
            <el-dialog title="添加用户" :visible.sync="dialogVisibleAddUser" width="700px">
                <div>
                    <el-form ref="addUserForm" :model="addUser" :rules="rules">
                        <!--表单校验 -->
                        <el-row>
                            <!-- 第1行有4列 -->
                            <el-col :span="12">
                                <el-form-item label="姓名:" prop="realName">
                                    <el-input v-model="addUser.realName" size="small" prefix-icon="el-icon-edit" placeholder="请输入姓名" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别:" prop="userSex">
                                    <el-radio-group v-model="addUser.userSex">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第2行有4列 -->
                            <el-col :span="12">
                                <el-form-item label="账号:" prop="userName">
                                    <el-input v-model="addUser.userName" size="small" prefix-icon="el-icon-edit" placeholder="请输入账号" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱:" prop="email">
                                    <el-input v-model="addUser.email" size="small" prefix-icon="el-icon-edit" placeholder="请输入邮箱" style="width: 175px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第3行有3列 -->
                            <el-col :span="12">
                                <el-form-item label="密码:" prop="password">
                                    <el-input v-model="addUser.password" size="small" prefix-icon="el-icon-edit" placeholder="请输入密码" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="手机号:" prop="mobile">
                                    <el-input v-model="addUser.mobile" size="small" prefix-icon="el-icon-edit" placeholder="请输入手机号" style="width: 165px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleAddUser = false">取 消</el-button>
                    <el-button type="primary" @click="doAddUser">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="编辑用户信息" :visible.sync="dialogVisibleEditUser" width="700px">
                <div>
                    <el-form ref="editUserForm" :model="editUser" :rules="rules">
                        <!--表单校验 -->
                        <el-row>
                            <!-- 第1行有4列 -->
                            <el-col :span="12">
                                <el-form-item label="姓名:" prop="realName">
                                    <el-input v-model="editUser.realName" size="small" prefix-icon="el-icon-edit" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别:" prop="userSex">
                                    <el-radio-group v-model="editUser.userSex">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第2行有4列 -->
                            <el-col :span="12">
                                <el-form-item label="账号:" prop="userId">
                                    <el-input v-model="editUser.userId" disabled size="small" prefix-icon="el-icon-edit" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="ID:" prop="id">
                                    <el-input v-model="editUser.id" disabled size="small" prefix-icon="el-icon-edit" style="width: 175px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第3行有3列 -->
                            <el-col :span="12">
                                <el-form-item label="所属单位:" prop="unitName">
                                    <el-input v-model="editUser.unitName" size="small" prefix-icon="el-icon-edit" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="单位类型:" prop="unitType">
                                    <el-input v-model="editUser.unitType" size="small" prefix-icon="el-icon-edit" style="width: 165px;" />
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="12">
                                单位类型:
                                <el-select v-model="editUser.unitType" size="small" placeholder="单位类型" style="width: 150px;">
                                    <el-option v-for="(item,index) in unitTypes" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第3行有3列 -->
                            <el-col :span="12">
                                <el-form-item label="专业:" prop="major">
                                    <el-input v-model="editUser.major" size="small" prefix-icon="el-icon-edit" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="领域:" prop="area">
                                    <el-input v-model="editUser.area" size="small" prefix-icon="el-icon-edit" style="width: 165px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第3行有3列 -->
                            <!-- <el-col :span="12">
                                <el-form-item label="职位:" prop="occupation">
                                    <el-input v-model="editUser.occupation" size="small" prefix-icon="el-icon-edit" style="width: 150px;" />
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="12">
                                职位:
                                <el-select v-model="editUser.occupation" size="small" placeholder="单位类型" style="width: 150px;">
                                    <el-option v-for="item in occupations" :key="item.postId" :label="item.postName" :value="item.postId" />
                                </el-select>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="地址:" prop="address">
                                    <el-input v-model="editUser.address" size="small" prefix-icon="el-icon-edit" style="width: 165px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleEditUser = false">取 消</el-button>
                    <el-button type="primary" @click="doEditUser">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="查看用户信息" :visible.sync="dialogVisibleGetUser" width="900px">
                <div>
                    <el-form ref="getUserForm" :model="getUser" :rules="rules">
                        <!--表单校验 -->
                        <el-row>
                            <!-- 第1行有4列 -->
                            <el-col :span="8">
                                <el-form-item label="创建时间:" prop="createTime">
                                    <el-input v-model="getUser.createTime" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="更新时间:" prop="updateTime">
                                    <el-input v-model="getUser.updateTime" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="用户ID:" prop="userId">
                                    <el-input v-model="getUser.userId" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第2行有4列 -->
                            <el-col :span="8">
                                <el-form-item label="账号:" prop="userName">
                                    <el-input v-model="getUser.userName" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="密码:" prop="userPassword">
                                    <el-input v-model="getUser.userPassword" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="昵称:" prop="nickName">
                                    <el-input v-model="getUser.nickName" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第3行有3列 -->
                            <el-col :span="8">
                                <el-form-item label="用户类型:" prop="userType">
                                    <el-input v-model="getUser.userType" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="手机号:" prop="userMobile">
                                    <el-input v-model="getUser.userMobile" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="名字:" prop="userEmail">
                                    <el-input v-model="getUser.realName" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第4行有3列 -->
                            <el-col :span="8">
                                <el-form-item label="头像:" prop="userAvatar">
                                    <el-input v-model="getUser.userAvatar" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="角色:" prop="roles">
                                    <el-input v-model="getUser.roles" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="启用:" prop="enabled">
                                    <el-input v-model="getUser.enabled" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- 第5行有3列 -->
                            <el-col :span="8">
                                <el-form-item label="账户未过期:" prop="accountNonExpired">
                                    <el-input v-model="getUser.accountNonExpired" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="账户未锁定:" prop="accountNonLocked">
                                    <el-input v-model="getUser.accountNonLocked" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="证书未过期:" prop="credentialsNonExpired">
                                    <el-input v-model="getUser.credentialsNonExpired" size="small" style="width: 150px;" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisibleGetUser = false">确 定</el-button>
                </span>
            </el-dialog>
        </page-main>
    </div>
</template>

<script>
export default {
    name: 'GeneralUser',
    data() {
        return {
            headers: {
                Authorization: localStorage.getItem('token')
            },
            realName: '',
            dataListUser: [],
            unitTypes: [], // 表单下拉框
            occupations: [],
            loading: false,
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dialogVisibleAddUser: false,
            dialogVisibleEditUser: false,
            dialogVisibleGetUser: false,
            addUser: {
                userName: '',
                realName: '',
                userSex: '',
                email: '',
                password: '',
                mobile: ''
            },
            editUser: {
                address: '',
                area: '',
                id: '',
                major: '',
                occupation: '',
                realName: '',
                unitName: '',
                unitType: '',
                userId: '',
                userSex: ''
            },
            getUser: {
                createTime: '',
                updateTime: '',
                userId: '',
                userName: '',
                userPassword: '',
                nickName: '',
                userType: '',
                userMobile: '',
                userEmail: '',
                userAvatar: '',
                roles: '',
                enabled: '',
                accountNonExpired: '',
                accountNonLocked: '',
                credentialsNonExpired: ''
            },
            rules: { // 校验,与prop名对应
                realName: [
                    { required: true, trigger: 'blur', message: '请输入用户姓名' } // 没输入时会弹出提醒
                ],
                userSex: [
                    { required: true, trigger: 'blur', message: '请选择性别' }
                ],
                email: [
                    { required: true, trigger: 'blur', message: '请输入邮箱' },
                    {type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'}
                ],
                userName: [
                    { required: true, trigger: 'blur', message: '请输入账号' }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '请输入密码' },
                    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
                ],
                mobile: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},
                    {validator: function(rule, value, callback) {
                        if (/^1[34578]\d{9}$/.test(value) == false) {
                            callback(new Error('请输入正确的手机号'))
                        } else {
                            callback()
                        }
                    }, trigger: 'blur'}
                ]
            }
        }
    },
    mounted() {
        this.initDataListUser()
    },
    methods: {
        initUnitTypes() {  // 单位类型下拉框加载
            this.getRequest('/unit/getUnitName').then(resp => {
                if (resp) {
                    this.unitTypes = resp.data
                }
            })
        },
        initOccupations() {  // 单位类型下拉框加载
            this.getRequest('/system/cfg/pos/info').then(resp => {
                if (resp) {
                    this.Occupations = resp.data
                }
            })
        },
        doAddUser() {
            this.$refs['addUserForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/system/user/addUser/', this.addUser).then(resp => { 
                        if (resp) {
                            this.dialogVisibleAddUser = false
                            this.initDataListUser()                            
                            this.$refs.addUserForm.resetFields()
                        }
                    })
                }
            })
        },
        doEditUser() {
            this.$refs['editUserForm'].validate(valid => {
                if (valid) {
                    this.putRequest('/system/user/updateUserInfo', this.editUser).then(resp => { 
                        if (resp) {
                            this.dialogVisibleEditUser = false
                            this.initDataListUser()
                        }
                    })
                }
            })
        },
        deleteUser(data) {
            this.$confirm('此操作将永久删除  ' + data.realName + ',是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/user/deleteUser/', data.userId).then(resp => {
                    if (resp) {
                        this.initDataListUser()
                        this.$forceUpdate()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        showAddUserView() {
            this.dialogVisibleAddUser = true
        },
        showEditUserView(data) {    
            this.initUnitTypes()
            this.initOccupations()
            this.editUser = JSON.parse(JSON.stringify(data))
            this.dialogVisibleEditUser = true
        },  
        showGetUserView(data) {          
            this.getRequest('/system/user/getUserAccount/' + data.userId).then(resp => {
                if (resp) {
                    this.getUser = resp.data
                    this.dialogVisibleGetUser = true
                }
            })
        },
        sizeChange(pageSize) {
            this.pageSize = pageSize
            this.initDataListUser()
        },
        currentChange(currentPage) {
            this.currentPage = currentPage
            this.initDataListUser()
        },
        initDataListUser() {
            this.loading = true
            this.getRequest('/system/user/getUserInfo/?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&words=' + this.realName).then(resp => {
                this.loading = false
                if (resp) {
                    this.dataListUser = resp.data.data
                    this.total = resp.data.total
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.search { // 搜索框
    border: solid #0080ff;
    width: 300px;
    border-radius: 12px;
}
::v-deep .el-input-group__append { // 搜索按钮-->
    background-color: #0080ff;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border: 0;
}
::v-deep .el-icon-search { // 搜索的图标-->
    color: #fff;
    font-size: 25px;
    font-weight: bolder;
}
.slide-fade-enter-active {
    transition: all 0.8s ease;
}
.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}
</style>
